<template>
  <div>
    <el-link
        slot="reference"
        :underline="false"
        type="primary"
        @click="fileFn(1,option)"
    >{{ option.name }}
    </el-link>
    <iframeDown :fileSrc="fileDown"></iframeDown>
    <previewFile :visible.sync="previewVisible" :iframeSrc="iframeSrc"></previewFile>
    <!--    <div style="display: none">-->
    <!--      <viewer :images="studentPhoto" class="descimgBox">-->
    <!--        <img :src="studentPhoto[0]" class="viewerImg" :ref="`imgPrive${index}`" v-if="studentPhoto.length">-->
    <!--      </viewer>-->
    <!--    </div>-->
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  props: ['option', 'index'],
  name: "btn_file",
  computed: {
    ...mapGetters(['configData']),
  },
  data() {
    return {
      fileDown: '',
      previewVisible: false,
      iframeSrc: '',
      file_can_down: ['zip', 'rar'],
      file_preview: ['jpeg', 'png', 'jpg', 'JPG'],
      file_preview_can: ['docx', 'doc', 'xlsx', 'xls', 'pdf', 'jpeg', 'png', 'jpg', 'JPG'],
      previewStatus: false,
      type_: '',
      studentPhoto: []
    }
  },
  created() {
    this.fileSrc()
  },
  methods: {
    fileSrc() {
      let val = this.option
      if (val && val.src) {
        let a = val.src.split('.')
        this.type_ = a[a.length - 1]
        //判断是否可以预览
        if (this.file_preview_can.indexOf(this.type_) !== -1) {
          this.previewStatus = true
        }
        // 构建完整的文件路径
        const fullPath = this.configData && this.configData.url ? `${this.configData.url}${val.src}` : val.src
        this.studentPhoto.push(fullPath)
      }
    },
    fileFn(index, option) {
      console.log('点击了', index , option)
      this.iframeSrc = ''
      if (index === 2) {
        this.fileDown = option
      } else {
        // 需要判断可预览文件内容
        if (option && option.src) {
          // 构建完整的文件路径
          const fullPath = this.configData && this.configData.url ? `${this.configData.url}${option.src}` : option.src
          
          // 确保文件类型正确判断
          const fileExtension = option.src.split('.').pop().toLowerCase()
          
          if (this.file_preview.includes(fileExtension)) {
            // 图片预览
            this.$emit('showImg', JSON.parse(JSON.stringify(this.studentPhoto)))
          } else if (this.file_preview_can.includes(fileExtension)) {
            // 非图片文件预览
            this.iframeSrc = fullPath
            this.previewVisible = true
          } else {
            // 不可预览的文件，提示下载
            this.$message.info('该文件类型不支持预览，请下载查看')
            this.fileDown = option
          }
        } else {
          this.$message.error('文件路径不存在，无法预览')
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
